<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>分类查看</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>


<!--使用抽取的公共头部-->
<div th:insert="publicHeader.html"></div>
<script th:src="@{/publicHeader.js}"></script>



<div class="container-fluid" id="app" style="margin-top: 180px;margin-bottom: 100px" v-if="pageData.total>0">

    <div class="container col-md-12" v-if="pageData.total<1" >
        <h3 style="text-align: center">暂无 {{weaponTypeInfo.typeName}} 类武器</h3>
    </div>

    <div class="container" >

        <div class="row">
            <div class="col-md-12" v-if="pageData.total>0" >
                <p style="background-color: cornflowerblue ; color: white; font-size: 30px"> {{weaponTypeInfo.typeName}} 类武器</p>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6 col-md-4" v-for="weapon in pageData.records">
                <div class="thumbnail">
                    <img :src="weapon.productImgsrc" alt="..." class="col-sm-6 col-md-6" style="width: 140px;height: 130px">
                    <div class="caption text-left">
                        <p>武器ID:<span v-text="weapon.id" ></span></p>
                        <p>武器名称:<span v-text="weapon.productName"></span></p>
                        <p>武器价格:<span v-text="weapon.productPrice"></span></p>
                        <p>
                            <a class="btn btn-primary" @click.prevent="oneWeapon(weapon.id)" >详情</a> &nbsp;&nbsp;&nbsp;&nbsp;
                            <a class="btn btn-success" @click.prevent="addCart(weapon.id)">加入购物车</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 col-md-offset-5 col-lg-offset-4col-xl-offset-5" >
                <ul class="pagination justify-content-center">
                    <li><a href="" @click.prevent = "goPage(pageData.current-1)">上一页</a></li>
                    <li><a href="" v-for="num in pageData.pages" v-text="num" @click.prevent = "goPage(num)">n</a></li>
                    <li><a href="" @click.prevent = "goPage(pageData.current+1)">下一页</a></li>
                </ul>
            </div>
        </div>

    </div>


</div>

<script>
    let app = new Vue({
        el:"#app",
        data:{
            weaponTypeId:-1,
            weaponTypeInfo:{},
            pageData:{
                current:1,
                size:3,
                total:-1,
                records:[],
                pages:-1
            }
        },
        methods:{
            initWeaponTypeInfo(){
                let vueObj = this;
                $.get("/weaponType/typeDetail",{weaponTypeId:this.weaponTypeId},function (data) {
                    console.log(data);
                    vueObj.weaponTypeInfo = data;
                })
            }
            ,
            initPageData(){
                let vueObj = this;
                let params = {
                    current: this.pageData.current,
                    pageSize: this.pageData.size,
                    weaponTypeId: this.weaponTypeId
                }
                $.post("/weapon/weaponByType",params,function (data) {
                    console.log(data);
                    vueObj.pageData = data;
                })
            },
            oneWeapon(weaponId){
                console.log("详情书籍id:  " + weaponId)
                sessionStorage.setItem("weaponId",weaponId)
                location.href="/singleWeapon.html";
            },
            goPage(pageNum){
                if (pageNum<1 || pageNum >this.pageData.pages || pageNum==this.pageData.current){
                    console.log("无效pageNum "+pageNum);
                    return
                }
                this.pageData.current = pageNum;
                this.initPageData();
            },
            addCart(weaponId){
                if (!weaponHeaderType.uname){
                    alert("该用户未登录,请登录后加购商品!")
                    return;
                }
                console.log("购物车时武器ID:  " + weaponId)
                $.post("/cart/addCart",{weaponId:weaponId},function (data) {
                    console.log(data);
                    if (data == "ok"){
                        alert("加购成功!")
                    }else {
                        alert("当前加入购物车人数过多,请稍后再试!");
                    }
                })
            }
        },
        created() {
            let typeId = sessionStorage.getItem("typeId");
            console.log(typeId);
            this.weaponTypeId = typeId;
            this.initWeaponTypeInfo();
            this.initPageData();
        }
    })
</script>

<div th:insert="publicFooter.html"></div>


</body>
</html>